<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>jquery.modulelist.js</title>
    <link rel="stylesheet" href="jquery.modulelist.css">
    <script src="../jquery/1.9.1/jquery.js"></script>
    <script src="../jquery/ui/1.12.0/jquery-ui.js"></script>
    <script src="jquery.modulelist.js"></script>
    <script>
        var n = 0;
        $(function () {
            var p = {
                draggable: '#draggable > div',
                empty: true,
                addCallback: function (event, ui) {
                    var $e = $(this);
                    if (event.type !== 'code.buildHandle') {
                        $e.append('<span>喵' + n++ + '</span><br><span>data-code:' + $e.attr('data-code') + '</span>')
                    }
                },
                clickRoleBefore: {
                    del: function ($e, $row, eleObj) {
                        return confirm("真的要删掉" + $row.text() + "吗？")
                    }
                },
                draggableEx: {},
                sortableEx: {}
            };
            p.sortable = '#啊？';
            $('#啊？').moduleList(p).moduleList('buildHandle', '>div');
            p.sortable = '.ccc';
            $('.ccc').moduleList(p).moduleList('buildHandle', '>div');

            $('body').disableSelection();
        })
    </script>
</head>
<body>

<div id="draggable">
    <div data-code="1">啊？</div>
    <div data-code="2">啊!</div>
    <div data-code="3">啊@</div>
    <div data-code="4">啊#</div>
    <div data-code="5">啊$</div>
    <div data-code="6">
        <img width="100px" src="https://www.baidu.com/img/bd_logo1.png">
    </div>
</div>

<hr>

<div id="啊？" style="width: 50%;">
    <div>1</div>
    <div>
        2
        <div>2.1</div>
    </div>
    <div>
        <div>3</div>
        <div class="ccc">
            <div>3.1</div>
            <div>3.2</div>
            <div>3.3</div>
        </div>
    </div>
    <div class="ccc">
        <div>4-1</div>
        <div>4-2</div>
        <div>4-3</div>
    </div>
</div>


</body>
</html>